<template>
<!-- 首页banner -->
  <div class="banner-box">
    <van-swipe :autoplay="5000" indicator-color="#D8D8D8" >
      <van-swipe-item v-for="(item, index) in bannerImages" :key="index" @click="clickBannerImg(item,index)">
        <img v-lazy="item.viewpagerUrl" />
	    	<div class="title">{{item.title | ellipsis}}</div>
        <LiveStatus :status="item | status()"></LiveStatus>
        <div class="mask"></div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import LiveStatus from '../components/liveStatus';//直播状态组件
export default {
   components:{
        LiveStatus
      },
    props: {
      bannerImages: {
        type: Array,
        default: [],
      },

    },
    data() {
      return {
        listArray: [],
      };
    },
    computed: {},
    created() {},
    mounted() {
    },
    methods: {
      clickBannerImg(item){
        if(item.type == '1'){ //长图
          this.$store.dispatch("dispatchBannerImgLink", item.typeUrl)
					this.$router.push(`/${this.$channel}/bannerLink`);
          return
        }
        if(item.type == '0'){//外链
            let getType = fun.GetUrlParam('type',item.typeUrl)
            fun.componentCreated({channle:'zhxyk',isFirstPage:getType=='special'?'1':'0'});//isFirstPage  1-跳转首页，0-返回上页，-1:隐藏公用标题，使用三方页面标题，closePage：关闭当前页面
             window.location.href = item.typeUrl
          return
        }
        if(item.type == '3'){//回看
          this.$router.push(`/${this.$channel}/liveBack/${item.typeId}?dzhPage=true`);
          return
        }
        if(item.type == '2'){//预告//直播
          this.$router.push(`/${this.$channel}/liveRoom/${item.roomId}?dzhPage=true`);
          return
        }

      }
    },
    watch: {
      bannerImages(val){
      }
    },
    filters: {
      //标题超过14个显示省略号
      ellipsis: function (value) {
        if (!value) return ''
        return value.length > 14 ? value.substring(0,14)+'...' : value
      },
      // 右上角角标 广告优先级最高
      status:function(item){ // type 0 链接(角标不展示) 1长图(角标不展示) 2直播场次(预约roomStatus 0/直播roomStatus 1) 3视频(回看)
           if(item.adFlag) return '3';
           if(item.type == '0' || item.type == '1') return null;
           if(item.type == '3') return '2'
           if(item.type == '2'){
              if(item.roomStatus =='0') return '0';//房间状态roomStatus  0 预告 1 直播中
              if(item.roomStatus =='1') return '1';
           }



      }
      }

  };

</script>

<style scoped="scoped">
  .banner-box {
    width: 100vw;
    height: 423px;
    margin-bottom: 60px;
  }
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(27, 27, 27, 0) 0%, rgba(0, 0, 0, 0.21) 100%);
  }
 .van-swipe{
	 height: 100%;
 }
 .van-swipe-item img{
	 width: 100%;
	 height: 100%;
 }
 /* 分页器样式 */
 .banner-box /deep/ .van-swipe__indicators{
	 left:inherit ;
	 right: -14px;
	 bottom: 30px;
   z-index: 1;
 }
 .banner-box /deep/ .van-swipe__indicator{
     width: 12px;
     height: 7px;
     margin-right: 8px;
     border-radius: 8px;
     background:rgba(216, 216, 216, 0.39);
  }
 .banner-box /deep/ .van-swipe__indicator--active{
     width: 21px;
  }
  .title{
    position: absolute;
    left: 14px;
    bottom: 13px;
    font-size: 30px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 42px;
    letter-spacing: 1px;
    z-index: 1;
}
.live-status-box{
   position: absolute;
   top: 30px;
   right: 32px;
   z-index: 1;
}
.banner-box >>> .live-status-box p span{
  padding-top: 8px;
  padding-bottom: 6px;
     }
</style>
